<template>
  <el-dialog
      v-model="dialogVisible"
      :title="`${isModify ? '修改' : '新增'}自动部署服务器`"
      width="500"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="服务器：" prop="server_id">
        <el-select v-model="form.server_id" placeholder="请选择" clearable>
          <el-option
              v-for="item in serverList"
              :key="`domain-service-form-select-${item.id}`"
              :label="item.address"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="更新文件" prop="update_files_list">
        <div class="page-header-button">
          <el-button type="text" @click="form.update_files_list.push({file_type_list: []})"><el-icon><CirclePlus /></el-icon></el-button>
        </div>
        <el-card v-for="(item, index) in form.update_files_list" :key="`domain-service-form-card-${item.id}`" style="width: 100%; text-align: left">
          <template #header>
            <el-row class="card-header">
              <el-col :span="20">
                更新容器：<el-select v-model="item.use_type" @change="changeFileType(index)" placeholder="请选择" clearable style="width: 80px">
                <el-option
                    v-for="typeItem in sslTypeList"
                    :key="`domain-service-form-use-type-select-${typeItem.value}`"
                    :label="typeItem.label"
                    :value="typeItem.value"
                />
              </el-select>
              </el-col>
              <el-col :span="4" style="text-align: right">
                <el-button type="text" @click="form.update_files_list.splice(index, 1)"><el-icon><Delete /></el-icon></el-button>
              </el-col>
            </el-row>
          </template>
          <el-row v-for="file_type in item.file_type_list" :key="`domain-service-form-card-file-type-${file_type}`" style="margin-bottom: 8px">
            <el-col :span="6" style="text-align: right">
              {{file_type}}文件：
            </el-col>
            <el-col :span="18" style="text-align: left">
              <el-input v-model="item[`file_${file_type}`]" placeholder="请输入文件路径" style="width: 200px" />
            </el-col>
          </el-row>
        </el-card>
      </el-form-item>
      <el-form-item label="更新后置命令" prop="after_command">
        <el-input
            v-model="form.after_command"
            style="width: 240px"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入后置命令"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveDomainService">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { CirclePlus, Delete } from '@element-plus/icons-vue'
import StoreServer from "@/store/StoreServer"
import EnumSSLUseType from "@/config/EnumSSLUseType"
import StringUtils from "@/utils/StringUtils"
import StoreSSLServer from "@/store/StoreSSLServer"
export default {
  name: 'DomainServiceForm',
  components: {
    CirclePlus, Delete
  },
  data() {
    return {
      dialogVisible: false,
      isModify: false,
      serverList: [],
      sslTypeList: EnumSSLUseType.valueList(),
      form: {
        update_files_list: []
      },
      rules: {
        server_id: [
          { required: true, message: '请选择服务器', trigger: 'blur' }
        ],
        update_files_list: [
          { required: true, type: 'array', message: '请选择更新文件', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 显示窗口.
     * @param isModify {boolean}
     * @param data {Object}
     */
    show(isModify, data) {
      this.isModify = isModify
      console.log('show domain service form', data)
      this.form = Object.assign({update_files_list: []}, data)
      this.loadServerList()
      this.dialogVisible = true
    },
    /**
     * 加载服务器列表.
     */
    loadServerList() {
      StoreServer.getAll({
      }, (data) => {
        this.serverList = data
      })
    },
    /**
     * 更改文件类型.
     * @param index {number}
     */
    changeFileType(index) {
      console.log('change file', index)
      if (this.form.update_files_list[index].use_type) {
        this.form.update_files_list[index].file_type_list = EnumSSLUseType.getByValue(this.form.update_files_list[index].use_type).fileTypeList
      } else {
        this.form.update_files_list[index].file_type_list = []
      }
    },
    /**
     * 保存域名服务.
     */
    saveDomainService() {
      this.$refs.ruleForm.validate((valid) => {
        if(valid) {
          console.log('save data', this.form)
          const id = this.form.id
          const updateData = {
            cloud_type: this.form.cloud_type,
            ssl_id: this.form.ssl_id,
            server_id: this.form.server_id,
            update_files: JSON.stringify(this.form.update_files_list),
            after_command: StringUtils.isBlank(this.form.after_command) ? '' : this.form.after_command
          }
          if (this.isModify) {
            StoreSSLServer.update(updateData, {id: id})
          } else {
            StoreSSLServer.insert(updateData)
          }
          this.$emit('refresh', {})
          this.$message.success('保存成功')
          this.dialogVisible = false
        }
      })
    }
  },
  mounted() {
    StoreServer.init(this)
    StoreSSLServer.init(this)
  }
}
</script>

<style scoped>

</style>